<script setup lang="jsx">
import { ref } from 'vue';
import { $t } from '@/locales';
import { fetchShopSeach } from '@/service/api';
import { useTable } from '@/hooks/common/table';

const { columns, data, loading, getData, getDataByPage, mobilePagination, searchParams, resetSearchParams } = useTable({
  apiFn: fetchShopSeach,
  apiParams: {
    PageIndex: 1,
    PageSize: 10,
    id: undefined,
    name: undefined,
    platform: undefined,
    tag: undefined,
    times: undefined,
    status: undefined
  },
  columns: () => [
    { prop: 'Name', label: $t('page.store.name') },
    { prop: 'exposure', label: $t('page.operations.exposure') },
    { prop: 'clickCount', label: $t('page.operations.clickCount') },
    { prop: 'clickRate', label: $t('page.operations.clickRate') },
    { prop: 'clickCost', label: $t('page.operations.clickCost') },
    { prop: 'advertisingInvestment', label: $t('page.operations.advertisingInvestment') },
    { prop: 'gmv', label: $t('page.operations.gmv') },
    { prop: 'grossProfit', label: $t('page.operations.grossProfit') },
    { prop: 'pricePerCustomer', label: $t('page.operations.pricePerCustomer') }
  ]
});
</script>

<template>
  <ElCard class="sm:flex-1-hidden card-wrapper" body-class="ht50">
    <template #header>
      <div class="flex items-center justify-between">
        <p></p>
        <TableHeaderOperation :loading="loading">
          <ElText type="primary">转换为产品</ElText>
        </TableHeaderOperation>
      </div>
    </template>
    <div class="h-[calc(100%-50px)]">
      <ElTable v-loading="loading" border class="sm:h-full" :data="data" row-key="ShopId">
        <ElTableColumn v-for="col in columns" :key="col.prop" v-bind="col" />
      </ElTable>
    </div>
  </ElCard>
</template>
